@extends('layouts.app')

@section('title', '购物车列表')
@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <div class="panel panel-default">
                    <div class="panel-heading">购物车列表</div>
                    <div class="panel-body">

                        <cart-items :items="{{$cartItems}}"></cart-items>

                        <form class="form-horizontal" id="order-form">
                            <div class="form-group">
                                <label class="control-label col-md-4">请选择收获地址</label>
                                <div class="col-md-6">
                                    <select class="form-control" name="address">
                                        @foreach($addresses as $address)
                                            <option value="{{$address->id}}">
                                            {{$address->province}}{{$address->city}}{{$address->district}}，{{$address->contact_phone}}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-md-4">备注</label>
                                <div class="col-md-6">
                                    <textarea class="form-control" rows="3" name="remark"></textarea>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-4 col-md-offset-4">
                                <button class="btn btn-primary btn-create-order" type="button">提交订单</button>
                            </div></div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('body')
    <script>
    $(function(){
        $('.btn-create-order').click(function(){
            req={
                address_id: $('#order-form select[name=address]').val(),
                remark: $('#order-form textarea[name=remark]').val(),
                items: app.items,
            }
            // console.log(req)
            axios.post("{{route('orders.store')}}", req).then(
                function(){
                    swal('操作成功','', 'success');
                    location.reload();
                },
                function(error){
                    var status=error.response.status;
                    var msg='系统错误';
                    if(status===422){
                        msg=''
                        error=error.response.data.errors;
                        for(var key in error){
                            msg+=error[key];
                            break;  //仅显示一条
                        }
                    }
                    swal(msg, '', 'error');
                }
            )
        })
    })
    </script>
@endpush